<template>
  <div class="view-box">
    <snowflakes :flag="true"></snowflakes>
    <div class="countdown-container">
      <div class="countdown-content">
        <div class="loading-animation" v-if="loading">
          <div class="loader"></div>
        </div>
        <transition name="fade">
          <p class="countdown-text" v-if="!loading">
            {{ tip_ }} 请在 <span class="countdown-timer">{{ timeLeft }}</span> 秒后，
            跳转到 <span class="countdown-target">{{ target_ }}</span>
          </p>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import settings from '@/settings'
import snowflakes from '@/components/snowflakes'

export default {
  name: 'waiting-page',
  components: {
    snowflakes
  },
  data() {
    return {
      q: null,
      tip_: '',
      target_: '',
      timeLeft: settings.waiting_time || 5,
      timer: null,
      loading: true,
      startTime: null,
      frameId: null,
      showSnow: true,
      snowflakes: 100
    }
  },
  created() {
    this.initSettings()
  },
  watch: {
    $route: {
      handler(route) {
        this.q = parseInt(route.query.q) || 0
        const d = parseInt(route.query.d) || 0
        this.tip_ = settings.tips[this.q]
        this.target_ = settings.tips[d] || ''
        this.s = route.query.s
      },
      immediate: true
    }
  },
  methods: {
    initSettings() {
      if (!settings) throw new Error('Settings not found')
      this.loading = false
      this.startCountdown()
    },
    startCountdown() {
      this.timer = setInterval(() => {
        this.timeLeft--
        if (this.timeLeft <= 0) {
          clearInterval(this.timer)
          this.redirectAfterCountdown()
        }
      }, 1000)
    },
    redirectAfterCountdown() {
      const routes = {
        1: {
          path: sa.$sys.getCurSer().url,
          name: sa.$sys.getCurSer().viewName
        },
        2: {
          path: settings.login_url,
          query: {
            s: this.s
          }
        },
      }
      const route = routes[this.q]
      if (route) {
        this.$router.push(route)
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.view-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  backdrop-filter: blur(2px);
  animation: gradientBG 5s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 2;
}

.countdown-content {
  max-width: 800px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.6);
  }
}

.countdown-text {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 2;
  text-align: center;

  .countdown-timer {
    background: linear-gradient(90deg, #ff0000, #ff8c00, #ffd700);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    padding: 0 5px;
    animation: pulse 1.5s infinite;
  }

  .countdown-target {
    color: #002e78;
    font-weight: bold;
    padding: 0 5px;
    transition: color 0.3s ease;

    &:hover {
      color: #0056b3;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .countdown-text {
    font-size: 18px;
  }
}

.loading-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--loader-color);
  border-radius: 50%;
  width: var(--loader-size);
  height: var(--loader-size);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
